<template>
    <div class="">
        <van-card
            class=""
            v-for="item in goodslist"
            :key="item.id"
            :thumb="APIDomainName + item.img"
            @click="onClickCard(item.id)"
            :num="`剩余 ${item.num} 件`"
            :price="item.price"
        >
            <template #desc>
                <div class="goods_name">{{ item.name }}</div>
            </template>

            <template #price>
                <div class="goods_price">￥{{ item.price }}</div>
            </template>

            <template #num>
                <div class="goods_num">剩余 {{ item.num }} 件</div>
            </template>
        </van-card>
        <van-button
            class="more"
            v-if="goodslist.length !== 0"
            size="large"
            @click="onClickGetMore"
            >加载更多</van-button
        >
    </div>
</template>

<script>
import { Button, Card } from "vant";
import { getGoodsListByCategoryId } from "@/api/goods.js";
export default {
    components: {
        [Button.name]: Button,
        [Card.name]: Card,
    },
    data() {
        return {
            goodslist: [],
            //last_id: 0
            pageSize: 6,
            pageIndex: 1,
        };
    },
    props: ["category_id"],
    created() {
        this.getGoodsListByCategoryId();
    },
    methods: {
        async getGoodsListByCategoryId() {
            let params = {
                category_id: this.category_id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            try {
                let result = await getGoodsListByCategoryId(params);
                if (result.code == 1) {
                    if (result.data.length > 0) {
                        this.goodslist = this.goodslist.concat(result.data);
                    } else if (this.goodslist.length > 0) {
                        this.$toast("已经到达底部");
                    } else {
                        this.$toast("列表为空");
                    }
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({ title: "错误", message: error });
            }
        }, //===================================================
        onClickGetMore() {
            this.pageIndex++;
            this.getGoodsListByCategoryId();
        },

        onClickCard(item_id) {
            this.$router.push({ name: "goods_info", params: { id: item_id } });
        },
    },
};
</script>

<style lang="less" scoped>
.goods_name {
    font-size: 14px;
    color: #333;
    margin: 10px 0;
}

.goods_price {
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.goods_num {
    font-size: 13px;
}

.more {
    margin: 15px 0;
    font-size: 14px;
}
</style>
